---
title: 部署你的 Astro 網站
description: 如何到部署你的 Astro 網站到網路上。
sidebar:
  label: 部署概觀
i18nReady: true
---

import DeployGuidesNav from '~/components/DeployGuidesNav.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components'

**準備好建構並部署你的 Astro 網站嗎？** 跟著我們的部署服務指南，或繼續下滑了解關於 Astro 網站的基本部署方法。

## 部署指南

<DeployGuidesNav />

## 快速部署選項

Astro 網站可透過儀錶板或 CLI 快速建構並部署到數個主機上。

### 網站 UI

其中一個快速部署網站的方式是透過連結 Astro 專案的線上 Git 版本庫（如 GitHub、GitLab、Bitbucket）到服務主機提供者，接著利用 Git 之便來持續部署。

這些服務主機平台會自動偵測 Astro 專案來源版本庫的推送，接著建構網站並部署到自訂的 URL 或個人網域。通常這些平台的部署設定包含下列幾個步驟：

<Steps>
1. 將你的版本庫加到線上 Git 提供者（例如 GitHub、GitLab、Bitbucket）。

2. 選擇支援**持續部署**的服務主機（例如 [Netlify](/zh-tw/guides/deploy/netlify/) 或 [Vercel](/zh-tw/guides/deploy/vercel/)），接著匯入你的 Git 版本庫作為新網站或專案。

    許多常見的服務主機都能辨識出 Astro 網站，並依此選擇適當的設定以建構及部署，如下所示（若不同的話，也可修改這些設定）：

    :::note[部署設定]
    - **建構指令：** `astro build` 或 `npm run build`
    - **發布目錄：** `dist`
    :::

3. 點選「Deploy」，接著你的新網站就會在服務主機上建立並分配到專屬的 URL（例如 `new-astro-site.netlify.app`）。
</Steps>

這些服務主機會自動監看 Git 提供者的主要分支更動，每當有新的提交，便會重新建構並發布網站。這些設定通常可在服務主機提供者的儀表板 UI 上調整。

### CLI 部署

有些服務主機有他們自己的命令列（CLI），你可以用 npm 將其全域安裝到主機上。使用 CLI 部署的情況通常如下所示：

<Steps>
1. 全域安裝服務主機的 CLI。例如：

    <PackageManagerTabs>
      <Fragment slot="npm">
        ```shell
        npm install --global netlify-cli
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add --global netlify-cli
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn global add netlify-cli
        ```
        </Fragment>
    </PackageManagerTabs>

2. 執行 CLI 並按照指示授權與設定等等。

3. 建構網站並部署到服務主機

    許多常見的服務主機都能辨識出 Astro 網站，並依此選擇適當的設定以建構及部署，如下所示（若不同的話，也可修改這些設定）：

    :::note[部署設定]
    - **建構指令：** `astro build` 或 `npm run build`
    - **發布目錄：** `dist`
    :::


    其他服務主機則會要求你先[在本地端建構你的網站](#在本地端建構你的網站)，接著用命令列部署。
</Steps>

## 在本地端建構你的網站

許多服務主機像是 Netlify 和 Vercel 會為你建構網站並發布建立好的輸出檔到網路上。但有些網站會要求你在本地端建構，接著執行部署指令或上傳你建立好的輸出檔。

你可能也會希望先在本地端建構、預覽你的網站，或在自己的環境下找出任何潛在的錯誤或警告。

執行 `npm run build` 指令以建構 Astro 網站。

<PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm run build
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm run build
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn run build
    ```
    </Fragment>
</PackageManagerTabs>

建構後的輸出檔預設會放在 `dist/`，目錄位置可透過 [`outDir` 設定](/zh-tw/reference/configuration-reference/#outdir)調整。

## 為隨需算繪新增配接器

:::note
以[隨需算繪](/zh-tw/guides/on-demand-rendering/)部署 Astro 網站之前，請先確定以下事項：

- 在專案相依模組安裝[適當的配接器](/zh-tw/guides/on-demand-rendering/)（手動安裝，或用配接器的 `astro add` 指令，例如 `npx astro add netlify`）。
- 若是手動安裝，[新增配接器](/zh-tw/reference/configuration-reference/#integrations)到 `astro.config.mjs` 的 import 和 default export。（`astro add` 指令會為你執行這步驟！）
:::
